<template>
	<view id="record">
		<view class="choose">
			<view class="uni-list-cell-db">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">缴费类别<uni-icons type="bottom" size="20" color=" #358cff"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="example-body">
				<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick">选择时间<uni-icons type="bottom" size="20" color=" #358cff"></uni-icons>
				</uni-datetime-picker>
			</view>
		</view>

		<view class="month">4月</view>
		<view class="box">
			<view></view>
			<view class="box-fee">
				<view>电费</view>
				<view class="detail">04/18 08:21 4567899999876545</view>
			</view>
			<view class="fee">-500:00</view>
		</view>

		<view class="box">
			<view></view>
			<view class="box-fee">
				<view>水费</view>
				<view class="detail">04/18 08:21 4567899999876545</view>
			</view>
			<view class="fee">-500:00</view>
		</view>

		<view class="month">3月</view>
		<view class="box">
			<view></view>
			<view class="box-fee">
				<view>电费</view>
				<view class="detail">04/18 08:21 4567899999876545</view>
			</view>
			<view class="fee">-500:00</view>
		</view>

		<view class="box">
			<view></view>
			<view class="box-fee">
				<view>水费</view>
				<view class="detail">04/18 08:21 4567899999876545</view>
			</view>
			<view class="fee">-500:00</view>
		</view>
		<view class="box">
			<view></view>
			<view class="box-fee">
				<view>物业费</view>
				<view class="detail">04/18 08:21 4567899999876545</view>
			</view>
			<view class="fee">-500:00</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				array: ['电费', '水费', '物业费', '燃气费','暖气费','车位费','宽带费'],
				index: 0,
				range: []
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			}
		},

	}
</script>

<style lang="less" scoped>
	#record {
		.month {
			margin: 30rpx;
		}
		

		.choose {
			display: flex;
			justify-content: flex-start;
		}

		.uni-input,.example-body {
			background: #e4f0ff;
			width: 220rpx;
			height: 55rpx;
			text-align: center;
			line-height: 55rpx;
			color: #358cff;
			border-radius: 27rpx;
			margin: 30rpx;
		}

		.box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 680rpx;
			height: 150rpx;
			margin: 30rpx auto;
			border-radius: 8rpx;
			border: 1rpx solid #f5f5f5;
			box-shadow: 0rpx 0rpx 20rpx 0rpx #f5f5f5;

			.detail {
				font-size: 26rpx;
				color: #d0d0d0;
			}
		}

		.fee {
			color: #f46a6a;
		}

		.box-fee {
			margin: 30rpx 0 30rpx 40rpx;

			:nth-child(1) {
				padding-bottom: 20rpx;
			}
		}
	}
</style>
